<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

	<!-- Definiendo la cabecera de la pagina -->
	<ui:define name="title">
		<h:outputText value="Apertura Cta. Plazo Fijo" />
	</ui:define>

	<!-- Definiendo el cuerpo de la pagina -->
	<ui:define name="content">

		<h:outputStylesheet library="css" name="main.css" />

		<div>
			<br />
			<div style="margin-left: 50px;">
				<div>
					<div>
						<div class="p6n-api-consent-screen-title p6n-action-bar">TITULAR (ES)</div>

					</div>
				</div>
			</div>

			<!-- TITULARES -->
			<h:form id="formBeneficiariosTitulares">
				<div class="p6n-content ng-scope">
					<div class="p6n-content-no-nav ng-scope">
						<div class="p6n-main-pane ng-isolate-scope">
							<div class="">
								<div class="ng-scope">
									<!-- <div class="p6n-api-consent-screen-input-section"
										style="margin-top: 0px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">CANTIDAD RETIRANTES</div>
										<div>
											<div>
												<h:inputText id="txtCantidadRetirantes"
													value="#{aperturaCuentaplazofijoBean.cantidadRetirantes}"
													required="true" requiredMessage="Ingrese cantidad"
													converterMessage="Número invalido"
													pt:placeholder="Minimo 1">
													<f:convertNumber type="number" integerOnly="true" />
												</h:inputText>
											</div>
										</div>
									</div> -->
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtCantidadRetirantes" />
									</div>
								</div>
								<div class="ng-scope">
									<table class="p6n-table">
										<thead>
											<tr>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Tipo
														documento </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Nro
														documento </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														paterno </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														materno </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Nombres </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Sexo </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link">
														F.nacimiento </a></th>
												<th class="p6n-api-list-col-status"><a
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
												<th class="p6n-api-list-col-status"><a
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
											</tr>
										</thead>
										<tbody>
											<h:panelGroup
												rendered="#{aperturaCuentaplazofijoBean.personanatural}">
												<tr class="ng-scope">
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.comboTipodocumentoPersonanatural.objectItemSelected.abreviatura}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.numeroDocumentoPersonanatural}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.apellidoPaternoPersonanatural}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.apellidoMaternoPersonanatural}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.nombresPersonanatural}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.comboSexoPersonanatural.objectItemSelected.denominacion}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.fechaNacimientoPersonanatural}">
																<f:convertDateTime pattern="dd/MM/yyyy" />
															</h:outputLabel>
													</a></td>
													<td colspan="2">No editable</td>
												</tr>
											</h:panelGroup>
											<h:panelGroup
												rendered="#{aperturaCuentaplazofijoBean.personajuridica}">
												<tr class="ng-scope">
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.comboTipodocumentoRepresentantelegal.objectItemSelected.abreviatura}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.numeroDocumentoRepresentantelegal}" />
													</a></td>
													<td><a 
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.apellidoPaternoRepresentantelegal}" />
													</a></td>
													<td><a 
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.apellidoMaternoRepresentantelegal}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.nombresRepresentantelegal}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.comboSexoRepresentantelegal.objectItemSelected.denominacion}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{aperturaCuentaplazofijoBean.fechaNacimientoRepresentantelegal}">
																<f:convertDateTime pattern="dd/MM/yyyy" />
															</h:outputLabel>
													</a></td>
													<td colspan="2">No editable</td>
												</tr>
											</h:panelGroup>
											<ui:repeat
												value="#{aperturaCuentaplazofijoBean.listTitulares()}"
												var="persona">
												<tr class="ng-scope">
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.tipodocumento.abreviatura}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.numerodocumento}" />
													</a></td>
													<td><a 
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.apellidopaterno}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.apellidomaterno}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.nombres}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.sexo.denominacion}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.fechanacimiento}">
																<f:convertDateTime pattern="dd/MM/yyyy" />
															</h:outputLabel>
													</a></td>
													<td><h:commandButton value="Edit"
															styleClass="action green" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaplazofijoBean.editTitular(persona)}"
																render=":panelGroupDlgTitular :formDialogTitular" />
														</h:commandButton></td>
													<td><h:commandButton value="Remove"
															styleClass="action red" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaplazofijoBean.removeTitular(persona)}"
																render="@form" />
														</h:commandButton></td>
												</tr>
											</ui:repeat>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- END TITULARES -->
				<!-- BENEFICIARIOS -->
				<br />
				<br />
				<div style="margin-left: 50px;">
					<div>
						<div>
							<div class="p6n-api-consent-screen-title p6n-action-bar">BENEFICIARIOS</div>

						</div>
					</div>
				</div>
				<div class="p6n-content ng-scope">
					<div class="p6n-content-no-nav ng-scope">
						<div class="p6n-main-pane ng-isolate-scope">
							<div class="">
								<div class="ng-scope">
									<table class="p6n-table">
										<thead>
											<tr>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Nro
														documento </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														paterno </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														materno </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Nombres </a></th>
												<th><a
													class="ng-isolate-scope p6n-clickable-link"> Porcentaje
												</a></th>
												<th class="p6n-api-list-col-status"><a
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
												<th class="p6n-api-list-col-status"><a
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
											</tr>
										</thead>
										<tbody>
											<ui:repeat
												value="#{aperturaCuentaplazofijoBean.listBeneficiarios()}"
												var="beneficiario">
												<tr class="ng-scope">
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.dni}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.apellidopaterno}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.apellidomaterno}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.nombres}" />
													</a></td>
													<td><a
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.porcentajebeneficio}%" />
													</a></td>
													<td><h:commandButton value="Edit"
															styleClass="action blue" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaplazofijoBean.editBeneficiario(beneficiario)}"
																render=":panelGroupDlgBeneficiario :formDialogBeneficiario" />
														</h:commandButton></td>
													<td><h:commandButton value="Remove"
															styleClass="action red" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaplazofijoBean.removeBeneficiario(beneficiario)}"
																render="@form" />
														</h:commandButton></td>
												</tr>
											</ui:repeat>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="p6n-content ng-scope">
					<div class="p6n-envelope">
						<div class="p6n-content-no-nav">
							<div class="p6n-main-pane p6n-acl-pane">
								<div class="p6n-action-bar" style="padding-bottom: 45px;">

									<script type="text/javascript">
										window.onload = function test(){
        									document.getElementById('formBeneficiariosTitulares:buttomBeneficiario').focus();
        								}
    								</script>

									<h:commandButton value="Añadir Beneficiario" id="buttomBeneficiario"
										styleClass="action red">
										<f:ajax
											listener="#{aperturaCuentaplazofijoBean.setDlgBeneficiarioOpen(true)}"
											render=":panelGroupDlgBeneficiario :formDialogBeneficiario" />
									</h:commandButton>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- END BENEFICIARIOS -->

				<div class="sf-buttons" style="float: left;">
					<h:panelGroup
						rendered="#{aperturaCuentaplazofijoBean.personanatural}">
						<h:commandButton value="« Anterior" immediate="true"
							action="aperturaCuentaplazofijo-flow" styleClass="action" />
						<h:commandButton value="Siguiente »"
							action="aperturaCuentaplazofijo-flowC"
							actionListener="#{aperturaCuentaplazofijoBean.addTitularDefecto()}"
							styleClass="action green" />
					</h:panelGroup>
					<h:panelGroup
						rendered="#{aperturaCuentaplazofijoBean.personajuridica}">
						<h:commandButton value="« Anterior"
							action="aperturaCuentaplazofijo-flowA" styleClass="action" />
						<h:commandButton value="Siguiente »"
							action="aperturaCuentaplazofijo-flowC"
							actionListener="#{aperturaCuentaplazofijoBean.addTitularDefecto()}"
							styleClass="action green" />
					</h:panelGroup>
				</div>
			</h:form>

			<h:panelGroup id="panelGroupDlgBeneficiario">
				<h:panelGroup
					rendered="#{aperturaCuentaplazofijoBean.dlgBeneficiarioOpen}">
					<div class="modal-dialog-bg"
						style="opacity: 0.4; width: 1366px; height: 702px;"></div>
					<div class="modal-dialog p6n-popup" style="left: 402px; top: 50px;">
						<h:form id="formDialogBeneficiario">
							<p:focus for="txtNumerodocumentoBeneficiario"></p:focus>
							<div class="modal-dialog-content p6n-acl-add-member-popup"
								style="width: 385px;">
								<div class="p6n-api-consent-screen-inputs">
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title">Beneficiario</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">NUMERO
											DOCUMENTO</div>
										<div>
											<h:inputText id="txtNumerodocumentoBeneficiario"
												value="#{aperturaCuentaplazofijoBean.numeroDocumentoBeneficiario}"
												maxlength="15"
												validatorMessage="Número de documento Invalido"
												converterMessage="Número de documento Invalido"
												pt:placeholder="Número Documento">
												<f:convertNumber type="number" integerOnly="true"
													groupingUsed="false" />
											</h:inputText>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtNumerodocumentoBeneficiario" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label"
												style="width: 190px;">APELLIDO PATERNO</div>
											<div>
												<div>
													<h:inputText id="txtApellidoPaternoBeneficiario"
														value="#{aperturaCuentaplazofijoBean.apellidoPaternoBeneficiario}"
														required="true" maxlength="50"
														requiredMessage="Ingrese apellido paterno"
														onkeyup="this.value = this.value.toUpperCase();"
														pt:placeholder="Apellido Paterno">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label"
												style="width: 180px;">APELLIDO MATERNO</div>
											<div>
												<div>
													<h:inputText id="txtApellidoMaternoBeneficiario"
														value="#{aperturaCuentaplazofijoBean.apellidoMaternoBeneficiario}"
														required="true" maxlength="50"
														requiredMessage="Ingrese apellido materno"
														onkeyup="this.value = this.value.toUpperCase();"
														pt:placeholder="Apellido Materno">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtApellidoPaternoBeneficiario" />
										<h:message for="txtApellidoMaternoBeneficiario" />
									</div>
									<div class="p6n-api-consent-screen-input-section"
										style="width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">NOMBRES</div>
										<div>
											<div>
												<h:inputText id="txtNombresBeneficiario"
													value="#{aperturaCuentaplazofijoBean.nombresBeneficiario}"
													required="true" maxlength="50"
													requiredMessage="Ingrese nombres"
													onkeyup="this.value = this.value.toUpperCase();"
													style="width:339px;" pt:placeholder="Nombres">
												</h:inputText>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtNombresBeneficiario" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">PORCENTAJE BENEFICIO</div>
										<div>
											<div>
												<h:inputText id="txtPorcentajebeneficiarioBeneficiario"
													value="#{aperturaCuentaplazofijoBean.porcentajeBeneficio}"
													maxlength="3" pt:placeholder="(%)">
													<f:convertNumber type="number" integerOnly="true" />
												</h:inputText>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtPorcentajebeneficiarioBeneficiario" />
									</div>
								</div>
								<br />
							</div>
							<div class="modal-dialog-buttons">
								<h:commandButton value="Guardar" styleClass="action green">
									<f:ajax
										listener="#{aperturaCuentaplazofijoBean.addBeneficiario()}"
										execute="@form" render="@form :formBeneficiariosTitulares" />
								</h:commandButton>
								<h:commandButton value="Cancelar" styleClass="action">
									<f:ajax
										listener="#{aperturaCuentaplazofijoBean.setDlgBeneficiarioOpen(false)}"
										render="@form :panelGroupDlgBeneficiario" />
								</h:commandButton>
							</div>
						</h:form>

					</div>
				</h:panelGroup>
			</h:panelGroup>
		</div>
	</ui:define>

</ui:composition>
</html>